<style scoped>

.pro-con {
    padding: 0 20px;
    margin-bottom: 50px;
}
.pro-con .ivu-form-item{
    margin-bottom: 0;
}

.pro-con .ivu-col{
    padding-right: 0 !important;

}
 .fr{
    float: right;
}
.pro-pagesize .mr10{
    margin-right: 10px;
}
.search-h3{
    font-size: 18px;
    color: #ef8412;
    font-weight: normal;
    margin-bottom: 20px;
}


    /*//////////////////////////////*/


.search-h3{
    font-size: 18px;
    color: #ef8412;
    font-weight: normal;
    margin-bottom: 20px;
}
.search-form{
    border-bottom: 1px solid #d9d9d9;
}
.search-form .ivu-col{
    margin-bottom: 15px;
}
.clear{
    clear: both;
}
.table-theme{
    clear: both;
}
.table-action{
    padding-top: 0;
    padding-bottom: 15px;
}
.pro-pagesize{
    margin-bottom:10px;

}

.common-box-body.pr0 .ivu-form-item{
    padding-right: 0 !important;
}
</style>
<style>
    
</style>
<template>
    <div class="pro-list">
        <product-title></product-title>
        <div class="pro-con">
            <div class="pro-con-f common-box-body">
                <Row>
                    <h3 class="search-h3 huang" >
                        快速搜索
                    </h3>
                        <Form :model="searchForm" class="search-form">
                            <Row>
                                <Col :xs="24" :sm="24" :md="24" :lg="8">
                                    <Form-item>
                                        <i-input placeholder="请输入您想要搜索的分类名称" v-model="searchForm.cate_name"></i-input>
                                    </Form-item>
                                </Col>
                                <Col :xs="24" :sm="24" :md="24" :lg="8">
                                    <Form-item>
                                        <i-select placeholder="请选择一级分类" :transfer="true" filterable v-model="searchForm.pid">
                                            <i-option value=" ">不限</i-option>
                                            <template v-for="item in cateFirstList">
                                                <i-option :value="item.id" :key="item.id">{{item.cate_name}}</i-option>
                                            </template>
                                        </i-select>
                                    </Form-item>
                                </Col>
                                <Col :xs="24" :sm="24" :md="24" :lg="8" class="table-action" >
                                    <Button type="warning" size="large" v-if="$isShow('class_cate/create')" class="fr" icon="plus"  @click="modal1True">新增栏目分类</Button>
                                    <div style="border-right: 1px solid #EDF2F6;padding-right: 15px;margin-right: 15px;" class="fr">
                                            <span class="clear"></span>
                                        <Button type="primary" size="large" class="fr"   icon="ios-search" @click="search">搜索</Button>
                                    </div>
                                </Col>
                                <div class="clear"></div>
                            </Row>
                        </Form>
                </Row>
            </div>
            <div class="table-theme highlight_table">
                <Table :loading="tableloading" ref="currentRowTable"  @on-current-change="tableCurrentChange($event)" size="large" stripe highlight-row border :columns="columns1" :data="classList"></Table>
            </div>
            <div id="footer">                
                <Row class="pro-pagesize">
                    <Col :md="24" :lg="16">
                        <i-button type="error" class="fl mr10 " v-if="$isShow('class_cate/del')" :disabled="disabled" @click="remove">删除</i-button>
                        <i-button type="info" class="fl mr10 " v-if="$isShow('class_cate/update')" :disabled="disabled" @click="toDetail">编辑</i-button>        
                    </Col>
                    <Col :md="24" :lg="8" class="tRight">
                        <Page ref="pages"  :total="classTotal" show-total show-sizer :page-size="pagesize" @on-change="pageChange" @on-page-size-change="pageSizeChange" placement="top" class="page"></Page>
                    </Col>
                </Row>
            </div>
        </div>
        <Modal
        v-model="modal1"
        title="新增栏目分类"
        :mask-closable="false"
        @on-ok="ok"
        @on-cancel="cancel">
        <Form class="common-box-body pr0" :model="form">
            <i-col span="24">
                <FormItem label="上级分类" class="pr0">
                    <i-select v-model="form.pid">
                        <i-option value="0">根分类</i-option>
                        <template v-for="item in cateFirstList">
                            <i-option :value="item.id" :key="item.id">{{item.cate_name}}</i-option>
                        </template>
                    </i-select>
                </FormItem>
            </i-col>
            <i-col span="24">
                <FormItem label="分类名称" class="pr0">
                    <i-input placeholder="请输入分类名称" v-model="form.cate_name"></i-input>
                </FormItem>
            </i-col>
        </Form>
    </Modal>
    </div>
    
</template>

<script>
import productTitle from '../../components/productTitle'

import { saveCate , get_cate_list , get_cate_one , cate_detail , delCate , update_cate} from '../../api/class_cate'




//新
export default {
    data() {
        return {
            cateFirstList:[],
            tableloading:true,
            modal1:false,
            disabled:true,
           columns1:[
               {
                   type:'index',
                   title:'序号',
                   width:'60',
                   align:'center'

               },
               {
                    key:'pid_name',
                    title:'分类级别' ,
                    align:'center'                  
               },
               {
                    key:'cate_name',
                    title:'分类名称',
                    align:'center'               
               },
           ],
           classList:[],
           classTotal:0,
           listTotal:0,
           p:1,
           pagesize:10,
           searchForm:{
                pagesize:10,
                p:1,
                pid:'',
                cate_name:''
           },
           form:{
               pid:0,
               cate_name:'',
           },
           current:{},
           panduan:true,
        };
    },
    components: {
        productTitle,
    },
    computed:{
    },
    created() {
        
    },
    mounted () {
        this.getList();
        this.gitCateFirst();
    },
    activated(){
        
        // this.$set('disabled',true);
        // this.all_company();
        // this.get_cate_one();
    },
    methods: {
        tableCurrentChange(currentRow,oldCurrentRow){
            this.disabled = false;
            this.current = currentRow;
            console.log(this.current)
        },
        //编辑
        toDetail(){
            this.form.pid="";
            this.form.cate_name="";
            this.modal1 = true
            this.panduan = false
            let params={
                id:this.current.id
            }
            new Promise((resolve,reject) =>{
                cate_detail(params).then(response=>{
                    if(response.data.err==0){
                        this.form = response.data.data;
                    }else{
                        this.$Message.error(response.data.info);
                    }
                    resolve();
                }).catch(error =>{
                    reject(error);
                });
            })
        },

        getList() {
            this.searchForm.p=this.p;
            this.searchForm.pagesize=this.pagesize;
            new Promise((resolve, reject) => {
                get_cate_list(this.searchForm).then(response => {
                    if(response.data.err==0){
                        this.classTotal = response.data.data.total;
                        this.classList = response.data.data.list;
                        // let _this = this;
                        // let list = [];
                        // response.data.data.list.map((item,index)=>{
                        //     if(item.son){
                        //         item.son.map((item1,index1)=>{
                        //             list.push({
                        //                 pid_name:item.cate_name,
                        //                 id:item1.id,
                        //                 cate_name:'(二)'+item1.cate_name,
                        //             })
                        //         })
                        //     }else{
                        //         list.push({
                        //             pid_name:'根分类',
                        //             id:item.id,
                        //             cate_name:'(根)'+item.cate_name,
                        //         })
                        //     }
                        //  })
                        // this.$nextTick(()=>{
                            //this.classList = list;
                        // })
                        this.tableloading = false;
                         
                    }else{
                        this.$Message.error(response.data.info);
                    }
                    resolve();
                }).catch(error => {
                    reject(error);
                });
            });
        },
        gitCateFirst(){
            new Promise((resolve,reject) =>{
                get_cate_one().then(response=>{
                    if(response.data.err==0){
                        this.cateFirstList = response.data.data;
                    }else{
                        this.$Message.error(response.data.info);
                    }
                    resolve();
                }).catch(error =>{
                    reject(error);
                });
            })
        },
        remove() {
            this.$Modal.confirm({
                title: '提示',
                content: '是否要删除该条记录?',
                onOk: () => {
                    var _param = {
                        id:this.current.id
                    }
                    new Promise((resolve,reject) =>{
                        delCate(_param).then(response=>{
                            if(response.data.err==0){
                                // this.getList();
                                this.$Message.success('操作成功!!!');
                                // this.gitCateFirst();
                                location.reload();
                                
                            }else{
                                if(response.data.err==1201){
                                    this.$Message.error('请完成信息！');
                                    
                                }else{
                                this.$Message.error(response.data.info);
                                    
                                }
                            }
                            resolve();
                        }).catch(error =>{
                            reject(error);
                        });
                    })
                },
            });
            
        },
        pageChange(value) {
            this.p = value;
            // let _query = Object.assign({},this.searchForm,{p:value,pagesize: this.pagesize})
            // this.$router.push({name:'pro',query:_query})
            this.getList();
        },
        pageSizeChange(value) {
            this.pagesize = value;
            this.getList();
        },
        addParter(){
            this.$router.push({name:'com_edit'})
        },
        parter_update(){
            this.$router.push({name:'com_edit2',params:{id:this.current.id}})
        },
        search(){
            this.getList();
        },
        ok(){
            if(!this.panduan){
                new Promise((resolve,reject) =>{
                    update_cate(this.form).then(response=>{
                        if(response.data.err==0){
                            this.getList();
                            this.form.pid="";
                            this.form.cate_name="";
                            this.gitCateFirst();
                            this.$Message.success('操作成功!');
                        }else{
                            if(response.data.err==1201){
                                    this.$Message.error('请完善信息！');
                                }else{
                                this.$Message.error(response.data.info);
                                    
                                }
                        }
                        resolve();
                    }).catch(error =>{
                        reject(error);
                    });
                })
            }
            if(this.panduan){
                new Promise((resolve,reject) =>{
                    saveCate(this.form).then(response=>{
                        if(response.data.err==0){
                            this.getList();
                            this.form.pid="";
                            this.form.cate_name="";
                            this.gitCateFirst();
                            this.$Message.success('操作成功!');
                        }else{
                            if(response.data.err==1201){
                                    this.$Message.error('请完善信息！');
                                }else{
                                this.$Message.error(response.data.info);
                                    
                                }
                        }
                        resolve();
                    }).catch(error =>{
                        reject(error);
                    });
                })
            }
            
        },
        cancel(){
            this.form.pid="";
            this.form.cate_name="";
            this.model1 = false;
        },
        modal1True(){
            this.modal1 = true;
            this.panduan = true
        },

    }

};
</script>
